<template>
	<div class="login">
		<div class="top">
			<span class="title">{{ title }}</span>
			<i @click="close" class="icon"></i>
		</div>
		<div class="middle">
			<a-form
				:layout="formState.layout"
				ref="formRef"
				:model="formState"
				:rules="rules"
			>
				<a-form-item
					:label="$t('personalCenter.newPassword', '新密码')"
					name="newPassword"
				>
					<a-input-password
						v-model:value="formState.newPassword"
						type="password"
						:placeholder="
							$t('personalCenter.pleaseEnterNewPassword', '请输入新密码')
						"
					/>
				</a-form-item>
				<a-form-item
					:label="$t('personalCenter.confirmPassword', '确认密码')"
					name="confirmPassword"
				>
					<a-input-password
						v-model:value="formState.confirmPassword"
						type="password"
						:placeholder="
							$t('personalCenter.pleaseEnterConfirmPassword', '请输入确认密码')
						"
					/>
				</a-form-item>
			</a-form>
		</div>
		<div class="bottom">
			<button class="cancel" @click="close">{{ $t('personalCenter.cancel', '取消') }}</button>
			<button class="bind" @click="onSubmit">{{ $t('personalCenter.confirm', '确认') }}</button>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent, ref, watch, onMounted, reactive } from 'vue'
import { apiInit } from '@/services'
import { useStore } from 'vuex'
import { i18n } from '@/locales'
import md5 from 'md5'
const { $t } = i18n
import message from 'ant-design-vue/lib/message'
export default defineComponent({
	props: {
		title: {
			type: String,
			default: '修改组织登录密码',
		},
	},
	setup(props, ctx) {
		const api = apiInit()
		const formRef = ref()
		// const isShow: any = ref(true)
		let formState: any = reactive({
			layout: 'vertical',
			newPassword: '',
			confirmPassword: '',
		})
		const store = useStore()

		// const employee_id = ref()
		// employee_id.value = store.state.userInfo.employee_id

		// watch(store.state, (state: any) => {
		// 	employee_id.value = state.userInfo.employee_id
		// 	CheckPwdIsNullUser(employee_id.value)
		// })

		// 判断当前用户是否有初始化密码
		// const CheckPwdIsNullUser = async (employee_id: string) => {
		// 	const result: any = await api.default.CheckPwdIsNullUserPrivateV2GET({
		// 		query: {
		// 			employeeId: employee_id,
		// 		},
		// 	})
		// 	if (result.code === '000000') {
		// 		isShow.value = result.data
		// 		return result.data
		// 	} else {
		// 		message.error(result.message ?? '')
		// 	}
		// }

		// 提交数据
		const onSubmit = () => {
			const params: any = {
				new_pwd: md5(formState.newPassword),
				old_pwd: md5(formState.confirmPassword),
                user_id:store.state.centerUser.user_base_info.user_id
			}
			formRef.value
				.validate()
				.then(async () => {
					const res: any = await api.default.SetPwdUserCenterPrivateV1POST({
						payload: params,
					})

					if (res.code === '000000') {
						message.success(
							$t('personalCenter.passwordUpdatedSuccessfully', '设置密码成功'),
							3
						),
							(formState = {
								newPassword: '',
								confirmPassword: '',
							})
						// window.location.reload()
						ctx.emit('setPwdFlag',true)
					} else {
						message.error(res.message, 3)
					}
				})
				.catch((error: any) => {
					return false
				})
		}

		// 新密码校验
		const newPasswordValidate = (rule: any, value: any, callback: any) => {
			const newFalg =
				/^(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/.test(
					formState.newPassword
				)
			if (newFalg) {
				callback()
			} else {
				callback(
					new Error(
						$t(
							'personalCenter.thePasswordLength',
							'密码长度为8-20位，且包含英文大小写和数字的组合'
						)
					)
				)
			}
		}
		// 确认密码校验
		const confirmPasswordValidate = (rule: any, value: any, callback: any) => {
			if (formState.newPassword === value) {
				callback()
			} else {
				callback(
					new Error(
						$t(
							'personalCenter.theTwoPasswordsAreInconsistent',
							'两次输入密码不一致'
						)
					)
				)
			}
		}

		const rules = {
			newPassword: [
				{
					required: true,
					message: $t('personalCenter.pleaseEnterNewPassword', '请输入新密码'),
					trigger: 'blur',
				},
				{
					validator: newPasswordValidate,
					trigger: 'blur',
				},
			],
			confirmPassword: [
				{
					required: true,
					message: $t(
						'personalCenter.pleaseEnterConfirmPassword',
						'请输入确认密码'
					),
					trigger: 'blur',
				},
				{
					validator: confirmPasswordValidate,
					trigger: 'blur',
				},
			],
		}

		//关闭
		const close = () => {
			ctx.emit('close', false)
		}

		onMounted(() => {
			// if (employee_id.value) {
			// 	CheckPwdIsNullUser(employee_id.value)
			// }
		})

		return {
			formRef,
			// isShow,
			formState,
			close,
			rules,
			onSubmit,
			// CheckPwdIsNullUser
		}
	},
})
</script>
<style lang="less" scoped>
.login {
	width: 430px;
	// height: 414px;
	background: #ffffff;
	border-radius: 8px;
    overflow: hidden;
	.top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50px;
		line-height: 50px;
		background: var(--bl-brand-c);
		padding: 0 15px;
		box-sizing: border-box;
		.title {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 500;
			font-size: 16px;
			color: #ffffff;
		}
		.icon {
			width: 23px;
			height: 23px;
			background-image: url(/public/icon/close.svg);
			cursor: pointer;
		}
	}
	.middle {
		padding: 25px 27px 0 23px;
	}
	.bottom {
		margin-bottom: 24px;
		display: flex;
		justify-content: flex-end;
		.cancel {
			// width: 62.17px;
			padding:0 17px;
			height: 32px;
			line-height: 32px;
			background: #ffffff;
			border: 1px solid #e8eaed;
			box-sizing: border-box;
			border-radius: 4px;
			text-align: center;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 500;
			font-size: 14px;
			margin-right: 12px;
			color: #1f2329;
			cursor: pointer;
		}
		.bind {
			// width: 62px;
			padding:0 17px;
			height: 32px;
			line-height: 32px;
			text-align: center;
			background: var(--bl-brand-c);
			border-radius: 4px;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 500;
			font-size: 14px;
			margin-right: 26px;
			color: #ffffff;
			cursor: pointer;
			border: 0;
		}
	}

	::v-deep .ant-form-item-control {
		margin-bottom: 26px;
		&.has-error {
			height:66px;
			margin:0;
		}
	}
	::v-deep .ant-form-item-required {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 20px;
		color: #1F2329;
	}
	::v-deep .ant-input-password {
		height:40px;
	}
	::v-deep .ant-form-item {
		padding-bottom:0px;
	}
	::v-deep .ant-form-explain {
		position:absolute
	}
}
</style>